<template>
  <div
    class="admin-dashboard-count-chart"
    ref="dashboard-container-data-count-chart"/>
</template>

<script>
  import { get } from '@/api/ajax'
  import API from '@/api/apis'
  import EChares from 'echarts'
  export default {
    name: "AdminDashboardCountChart",
    data() {
      return {
        /**
         * 全部数据个数对象
         */
        dataCount: {
          chart: null
        },
        /**
         * 事件监听器
         */
        elementResizeDetectorMaker: null
      }
    },
    methods: {
      /**
       * 设置图表数据
       */
      setDataCountChertData(dataArr) {
        const titleArr = dataArr.map((item) => {
          return item.title
        })
        const allCountArr = dataArr.map((item) => {
          return item.allCount
        })
        const normalCountArr = dataArr.map((item) => {
          return item.normalCount
        })
        const dustbinCountArr = dataArr.map((item) => {
          return item.dustbinCount
        })
        const deleteCountArr = dataArr.map((item) => {
          return item.deleteCount
        })
        this.dataCount.chart.setOption({
          color: ['#4e7efe', '#f39d43', '#f14578', '#f43fe6'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: 30,
            left: 30,
            right: 0,
            bottom: 30,
            containLabel: true
          },
          legend: {
            data: ['全部', '正常', '回收站', '删除']
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar', 'tiled']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              axisTick: {show: false},
              data: titleArr
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '全部',
              type: 'bar',
              barGap: 0,
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              data: allCountArr
            },
            {
              name: '正常',
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              data: normalCountArr
            },
            {
              name: '回收站',
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              data: dustbinCountArr
            },
            {
              name: '删除',
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              data: deleteCountArr
            }
          ]
        })
      }
    },
    mounted() {
      this.dataCount.chart = EChares.init(this.$refs['dashboard-container-data-count-chart']);
      get(API.dashboard.dataCount).w_then((dataArr) => {
        this.setDataCountChertData(dataArr)
      })
      this.elementResizeDetectorMaker = new window.elementResizeDetectorMaker()
      this.elementResizeDetectorMaker.listenTo(this.$refs['dashboard-container-data-count-chart'], () => {
        this.dataCount.chart.resize()
      });
    },
    beforeDestroy() {
      this.elementResizeDetectorMaker.removeListener(this.$refs['dashboard-container-data-count-chart'])
    }
  }
</script>

<style scoped>
  .admin-dashboard-count-chart {
    height: 500px;
  }
</style>
